<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Center the coordinate system
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2 - 20;
        ctx.translate(centerX, centerY);

        // Draw Axes
        const axisLength = 200;
        const arrowSize = 10;

        // z-axis (horizontal)
        ctx.beginPath();
        ctx.moveTo(-axisLength, 0);
        ctx.lineTo(axisLength, 0);
        ctx.stroke();
        // Arrowhead for z-axis
        ctx.beginPath();
        ctx.moveTo(axisLength, 0);
        ctx.lineTo(axisLength - arrowSize, -arrowSize / 2);
        ctx.moveTo(axisLength, 0);
        ctx.lineTo(axisLength - arrowSize, arrowSize / 2);
        ctx.stroke();
        ctx.fillText('z', axisLength + 15, 5);

        // x-axis (vertical)
        const xAxisLength = 150;
        ctx.beginPath();
        ctx.moveTo(0, -xAxisLength);
        ctx.lineTo(0, xAxisLength);
        ctx.stroke();
        // Arrowhead for x-axis
        ctx.beginPath();
        ctx.moveTo(0, -xAxisLength);
        ctx.lineTo(-arrowSize / 2, -xAxisLength + arrowSize);
        ctx.moveTo(0, -xAxisLength);
        ctx.lineTo(arrowSize / 2, -xAxisLength + arrowSize);
        ctx.stroke();
        ctx.fillText('x', 15, -xAxisLength - 10);

        // Dumbbell parameters
        const A = 160; // Length from origin to mass
        const theta = Math.PI / 6; // 30 degrees

        // Coordinates (canvas y is inverted)
        const m1_x = A * Math.cos(theta);
        const m1_y = -A * Math.sin(theta);
        const m2_x = -A * Math.cos(theta);
        const m2_y = A * Math.sin(theta);

        // Draw the rod
        ctx.beginPath();
        ctx.moveTo(m2_x, m2_y);
        ctx.lineTo(m1_x, m1_y);
        ctx.stroke();

        // Draw the masses
        const massRadius = 5;
        ctx.beginPath();
        ctx.arc(m1_x, m1_y, massRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(m2_x, m2_y, massRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Add Labels
        // Origin 'O'
        ctx.fillText('O', -15, 10);

        // Masses 'M1' and 'M2'
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('M', m1_x + 20, m1_y - 5);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('1', m1_x + 33, m1_y);
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('M', m2_x - 25, m2_y + 8);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('2', m2_x - 12, m2_y + 13);
        ctx.font = '22px "Times New Roman"';

        // Length 'A'
        const a_offset_x1 = 0.5 * m1_x;
        const a_offset_y1 = 0.5 * m1_y;
        ctx.fillText('A', a_offset_x1 + 10, a_offset_y1 - 20);

        const a_offset_x2 = 0.5 * m2_x;
        const a_offset_y2 = 0.5 * m2_y;
        ctx.fillText('A', a_offset_x2 - 10, a_offset_y2 + 20);

        // Angle 'θ'
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, -theta, true);
        ctx.stroke();
        ctx.fillText('θ', 60 * Math.cos(theta/2), -60 * Math.sin(theta/2) + 5);

        // Rotation indicator
        ctx.fillText('ω', axisLength - 20, 30);
        ctx.beginPath();
        ctx.ellipse(axisLength - 30, 0, 30, 12, 0, 0.1 * Math.PI, 0.9 * Math.PI);
        ctx.stroke();
        // Arrowhead for rotation
        const endAngle = 0.9 * Math.PI;
        const arrow_x = (axisLength - 30) + 30 * Math.cos(endAngle);
        const arrow_y = 12 * Math.sin(endAngle);
        ctx.beginPath();
        ctx.moveTo(arrow_x, arrow_y);
        ctx.lineTo(arrow_x + 8, arrow_y - 5);
        ctx.moveTo(arrow_x, arrow_y);
        ctx.lineTo(arrow_x + 3, arrow_y - 9);
        ctx.stroke();

        // Caption
        // Reset transform to draw at an absolute position
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('Fig. 1.134.', centerX, canvas.height - 25);
    </script>
</body>
</html>